<template>
  <NuxtLayout title="新增损伤" name="uni">
    <div class="main">
      <div class="main__content content">
        <div class="content__uploading p-4 flex gap-3 flex-col">
          <div class="w-full h-16">
            <div class="mb-1">上传损伤图片至待检测列表</div>
            <el-upload class="upload-demo" multiple>
              <el-button type="default">选择文件</el-button>
            </el-upload>
          </div>
          <div class="w-full h-20">
            <div class="mb-1">选择待检测图片</div>
            <el-select placeholder="请选择损伤图片">
              <el-option label="Options1" value="1" />
              <el-option label="Options2" value="2" />
            </el-select>
          </div>
          <div class="w-full h-20">
            <div class="mb-1">选择点云图片（非必选）</div>
            <el-select placeholder="请选择点云图片">
              <el-option label="Options1" value="1" />
              <el-option label="Options2" value="2" />
            </el-select>
          </div>
        </div>
        <div class="content__set flex p-4 gap-2 card-shadow">
          <div class="h-full" style="flex: 1">
            <div class="mb-1">材料类型</div>
            <el-select placeholder="请选择">
              <el-option label="Options1" value="1" />
              <el-option label="Options2" value="2" />
            </el-select>
          </div>
          <div class="h-full" style="flex: 1">
            <div class="mb-1">输入换算比例</div>
            <el-input placeholder="请输入" />
          </div>
          <div class="h-full" style="flex: 1">
            <div class="mb-1">检测阈值</div>
            <el-input placeholder="请输入" />
          </div>
          <div class="h-full" style="flex: 1">
            <div class="mb-1">分块形状</div>
            <el-input placeholder="请输入" />
          </div>
        </div>
        <el-button type="primary">开始检测</el-button>
      </div>
      <div class="main__action action r">
        <div class="action__left">
          <div class="mb-1 text-xl">检测结果:</div>
          <div style="width: 100%; height: 330px">
            <el-image style="width: 100%; height: 100%" src="" fit="cover" />
          </div>
        </div>
        <div class="action__right">
          <div class="mb-5 text-xl">检测信息输出：</div>
          <div class="test"></div>
          <div class="w-full">
            <div class="w-full flex-center h-12 gap-1">
              <el-input placeholder="输入序号" style="width: 120px" />
              <el-input placeholder="输入材料类别" style="width: 120px" />
            </div>
            <div class="w-full flex-center gap-1">
              <el-button type="danger">删除</el-button>
              <el-button type="success">添加</el-button>
              <el-button type="primary">保存</el-button>
              <el-button type="warning">导出</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
definePageMeta({
  layout:false,
});
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block("main") {
  min-width: 1300px;
  @apply w-full h-full p-4 flex flex-col;

  @include element("title") {
    @apply text-xl font-bold items-center flex;
  }

  @include element("content") {
    flex: 5;

    @apply flex gap-3;
  }

  @include element("action") {
    flex: 6;
  }
}

@include block("content") {
  @apply flex flex-col;

  @include element("uploading") {
    flex: 2;
    background-color: rgb(243, 244, 246);
  }

  @include element("set") {
    flex: 1;
    background-color: rgb(243, 244, 246);
  }
}

@include block("action") {
  @apply flex p-4 gap-10;

  @include element("left") {
    flex: 1;
  }

  @include element("right") {
    flex: 1;
  }
}

@include block("test") {
  width: 100%;
  height: 250px;
  border-radius: 2px;
  border: 2px solid rgb(191, 220, 255);

  &:hover {
    border: 2px solid rgb(64, 158, 255);
  }
}
</style>
